<template>
	<view>
		<view style="padding: 20px;" v-loading="page.loading">
			<!-- 页面主体内容开始 -->
			<el-tag
			  :key="item.name"
			  v-for="(item,index) in myTags"
			  closable
			  :disable-transitions="false"
				:effect="item.checked ? 'dark':'plain'"
				@click="tagClick(index)"
			  @close="deleteTag(index,item._id)"
			>
			  {{ item.name }}
			</el-tag>
			<el-input
			  class="input-new-tag"
			  v-if="inputVisible"
			  v-model="inputValue"
			  ref="saveTagInput"
			  size="small"
			  @keyup.enter.native="addTag"
			  @blur="addTag"
			>
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInput" type="primary" plain>+ 新增标签</el-button>
			<view style="margin-top: 10px;color: #999999;">提示：添加标签后，需要选中该标签才能给用户打上标签。</view>
			<!-- 页面主体内容结束 -->
		</view>
	</view>
</template>

<script>
var that; // 当前页面对象
export default {
	props: {
		value: {
			Type: Array,
			default: function(){
				return [];
			}
		},
		userInfo: {
			Type: Object,
			default: function(){
				return {};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "标签",
				submitText: "关闭",
				top: "7vh",
				width: "600px",
				loading: false,
				btnLoading: false
			},
			inputVisible: false,
			inputValue: '',
			form1:{
				tags:[]
			},
			myTags:[]
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { userInfo } = this;
			vk.callFunction({
				url: 'admin/business/sys/user.getTagList',
				loading:{ that, name:"page.loading" },
				data:{},
				success:function(data){
					let tagsList = data.rows;
					let { tags=[] } = userInfo;
					tags.map((tagItem, tagIndex) => {
						let index = vk.pubfn.getListIndex(tagsList, "_id", tagItem);
						if(index>-1){
							tagsList[index].checked = true;
						}
					});
					that.myTags = tagsList;
				}
			});
		},
		_input(value) {
			that.$emit("input", value);
		},

		deleteTag(index,_id) {
			 that.$confirm('此操作将从所有用户中删除此标签, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				that.myTags.splice(index, 1);
				vk.callFunction({
					url: 'admin/business/sys/user.delTag',
					loading:{ that, name:"page.btnLoading" },
					data:{
						_id,
					},
					success:function(data){

					}
				});
			}).catch(() => {

			});
		},
		tagClick(index){
			that.$set(that.myTags[index], "checked", !that.myTags[index].checked);
			let tags = [];
			that.myTags.map((item) => {
				if(item.checked && item._id){
					tags.push(item._id);
				}
			});
			that._input(tags);
		},

		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},

		addTag() {
			let inputValue = this.inputValue;
			if (inputValue) {
				if(vk.pubfn.getListIndex(that.myTags, "name", inputValue)>-1){
					that.$message.error('标签名称不可重复。');
					return false;
				}
				vk.callFunction({
					url: 'admin/business/sys/user.addTag',
					loading:{ that, name:"page.btnLoading" },
					data:{
						name: inputValue
					},
					success:function(data){
						that.myTags.push({
							_id: data._id,
							name: inputValue,
							checked: false
						});
					}
				});
			}
			this.inputVisible = false;
			this.inputValue = '';
		}
	},
	watch: {

	},
	// 计算属性
	computed: {

	}
};
</script>

<style lang="scss" scoped>
	.el-tag{
		cursor: pointer;
		user-select: none;
	}
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
